<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
</head>
<body onload="draw()">

<div id="container">
    <canvas id="mycanvas" width="150" height="150">Your Browser does not support Canvas, please upgrade</canvas>
</div>

<script>
    // 进行绘制4行3列的图形
    function draw() {
        const canvas = document.getElementById('mycanvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.onload = function () {
            for (let i = 0; i < 4; i++) {
                for (let j = 0; j < 3; j++) {
                    // drawImage()参数：图片/canvas元素、x, y, width、height
                    ctx.drawImage(img, j*50, i*38, 50, 38);
                }
            }
        }
        img.src = "../images/circle.jpg";
    }
</script>
</body>
</html>